<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>当当网</title>
    <style>
        #banner{
            margin: auto;
            width: 100%;
            height: 50px;
            
        }
        header{
            width: 100%;
            height: 50px;
            background-color: white;
            position: relative;
        }
        .logo{
            position:absolute;
            top: 0;
            left: 5px;;
        }
        .icon_count{
            position: absolute;
            right:260px;
            top: 3px;
        }
        ul,li{
            list-style: none;
            padding: 0;
            margin:0;
        }
        .rightbox{
            background-color: #A9F5D0;
            width: 300px;
            height: 30px;
            position:absolute;
            right: 0;
            bottom:0;
            border: 1px solid greenyellow;
        }
        
        li{
            vertical-align: middle;
            float: left;
            margin-left: 10px;
            line-height: 30px;
            
        }
        nav{
            margin-top: 10px;
            width: 100%;
            height: 30px;
            background-color: orange;
            display: flex;
            flex-direction: row;
            justify-content: space-around;
        }
        .navli{
            height: 30px;
            color: white;
            line-height: 30px;
        }
        #content{
            margin-top: 10px;
            width: 100%;
            height: 350px;
            border: 1px solid greenyellow;
            position: relative;
        }
        .bgbang{
            position: absolute;
            top: 10px;
            left: -10px;
        }
        .left{
            width: 250px;
            height: 250px;
            position: absolute;
            top: 50px;
            left: 10px;
        }
        .right{
            width: 450px;
            height: 250px;
            position: absolute;
            top: 50px;
            right: 20px;
          
        }
        .center{
            width: 400px;
            height: 250px;
            position: absolute;
            top: 50px;
            left: 300px;
           
            line-height: 20px;
        }
        .img2,.img3{
            display: block;
            margin: 10px;
        }
        .title1{
            position: absolute;
            top: 0;
            left: 13px;
        }
        .title2,.title3{
            position: absolute;
        }
        .title2{
            top: 3px;
            left: 3px;
        }
        .title3{
            top: 130px;
            left: 3px;
        }
        .jd{
            width: 150px;
            position: absolute;
            right: 180px;
            top: 5px;
          
        }
        .jd2{
            width: 150px;
            position: absolute;
            right: 180px;
            top: 130px;
           
        }
        footer{
            width: 100%;
            height: 50px;
            color: #cababa;
            margin: 0 auto;
            text-align: center;
        }
        .last{
            vertical-align: -14px;
        }
    </style>
</head>
<body>
    <div id="banner">
        <header>
            <img class="logo" src="image/logo.jpg" alt=""> 
            <img class="icon_count" src="image/icon_count.png" alt="">
            <ul class="rightbox">
                <li>货品汇</li>
                <li>当当优品</li>
                <li>数字馆</li>
                <li>都看问题</li>
            </ul>
        </header>
        <nav>
            <li class="navli">首页</li>
            <li class="navli">图书</li>
            <li class="navli">音像</li>
            <li class="navli">童装</li>
            <li class="navli">服装</li>
            <li class="navli">鞋靴</li>
            <li class="navli">活动</li>
            <li class="navli">箱包</li>
            <li class="navli">美妆</li>
            <li class="navli">珍宝</li>
            <li class="navli">家居</li>
            <li class="navli">食品</li>
            <li class="navli">酒</li>
            <li class="navli">手机</li>
            <li class="navli">数码</li>
            <li class="navli">电脑</li>
            <li class="navli">家电</li>
        </nav>
        <img src="image/banner.png" alt="" width="100%">
        <div id="content">

            <img src="image/bg_bang.gif" alt="" class="bgbang">
            <div class="left">
                <img src="image/bookNo1.gif" alt="" class="title1">
                <img src="image/book-01.jpg" alt="">
            </div>
            <div class="center">
                <p style="color: rgb(89, 89, 168);">偷影子的人</p>
                <span style="display: block;font-size: 13px;">(法)马克·李维 著</span>
                <span style="display: block; font-size: 13px;">出版社 湖南文艺出版社</span>
                <span style="font-size: 13px;">当当价：</span><span style="color: red;font-size: 13px;">¥19.90</span>
                <span style="display: block; font-size: 13px;">一部令整个法国为之动容的温情疗愈小说 2013年度大众喜爱的50本书之一 首印45万册，法国年度图书销售总榜优选 数百万中文读者口口相传，
                    外国文学畅销经典 附赠浪漫告白卡——“青春初吻”纪念明信片 《偷影子的人》是马克?</span>
            </div>
            <div class="right">
                <img src="image/bookNo2.gif" alt="" class="title2">
                <img src="image/bookNo3.gif" alt="" class="title3">
                <img src="image/book-02.jpg" alt="" class="img2">
                <div class="jd">
                    <p style="color: rgb(89, 89, 168);">看见</p>
                    <span style="display: block;font-size: 13px;">柴静 著</span>
                    <span style="display: block; font-size: 13px;">出版社 广西大学出版社</span>
                    <span style="font-size: 13px;">当当价：</span><span style="color: red;font-size: 13px;">¥29.90</span>

                </div>
                
                <img src="image/book-03.jpg" alt="" class="img3">
                <div class="jd2">
                    <p style="color: rgb(89, 89, 168);">改变孩子先改变自己</p>
                    <span style="display: block;font-size: 13px;">贾容韬 著</span>
                    <span style="display: block; font-size: 13px;">出版社 作家出版社</span>
                    <span style="font-size: 13px;">当当价：</span><span style="color: red;font-size: 13px;">¥27.90</span>

                </div>
            </div>
        </div>
        <footer>
            Copyright 2004 - 2021 当当网
            <img src="image/validate.gif" alt="" class="last">
            京ICP备17043473号-1
        </footer>
    </div>
</body>
</html>